<!-- 我要下单 -->
<template>
    <div style="background-color: #EFF1F2;padding: 12px 0;">
        <!-- session01 -->
        <div style="display: flex; background-color: white;padding: 12px;border-radius: 8px;">
        <!-- left -->
        <div style="flex:1;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">订单详情</div>
            </div>
            <!-- items -->
            <div style="margin-top: 12px;width: 50vw;overflow-x: scroll;display: flex;white-space: nowrap;">
                <!-- 已取消 -->
                <div v-for="(item,idx) in orders" :key="idx"  @click="index=idx"
                :style="{
                        display: 'flex',
                        flexShrink: 0,
                        flexDirection: 'column',
                        alignItems: 'center',
                        width: '90px',
                        height: '126px',
                        backgroundColor: index!=idx?'#ffffff':'#2456E0',
                        padding: '10px 0',
                        marginRight: '12px',
                        borderRadius: '18px',
                        }">
                        <el-image style="width: 50px;height: 50px;border-radius: 8px;" :src="orders[0].productImg"></el-image>
                        <div 
                        :style="{
                                fontSize: '16px',
                                color: index!=idx?'#222222':'#ffffff',
                                marginTop: '5px',
                                fontWeight: 'bold',
                                }"
                        >{{ orders[0].productName }}</div>
                    <div :style="{ fontSize: '12px',color: index !=idx?'#999999':'#ffffff',marginTop: '5px'}">{{item.status}}</div>
                </div>
            </div>
        </div>
            <!-- right -->
            <div style="flex: 1;" v-if="false">
                <!-- title -->
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">其他操作</div>
                </div>
                <!-- buttons -->
                <div style="margin-top: 12px;">
                    <div style="display: flex;">
                        <!-- 暂存订单 -->
                        <div style="padding: 5px 20px;background: linear-gradient(to right,#06C5EA,#2456E0); border-radius: 20px;margin-right: 12px;cursor: pointer;box-shadow: 0 3px 3px #2456E080;" @click="saveHandle()">
                            <div style="font-size: 16px;color: #ffffff;font-weight: bold;">暂存订单</div>
                        </div>
                        <!-- 发布订单 -->
                        <div style="padding: 5px 20px;background: linear-gradient(to right,#06C5EA,#2456E0); border-radius: 20px;cursor: pointer;box-shadow: 0 3px 3px #2456E080;" @click="publishHandle()">
                            <div style="font-size: 16px;color: white;font-weight: bold;">发布订单</div>
                        </div>
                    </div>
                    <div style="display: flex;flex-wrap: wrap;">
                        <!-- 价格变动 -->
                        <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer; box-shadow: 0 2px 3px #2456E040;">
                            <div style="font-size: 16px;color: #2456E0;">价格变动</div>
                        </div>
                        <!-- 预设报价明细 -->
                        <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer;box-shadow: 0 2px 3px #2456E040;">
                            <div style="font-size: 16px;color: #2456E0;">预设报价明细</div>
                        </div>
                        <!-- 评价 -->
                        <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer;box-shadow: 0 2px 3px #2456E040;">
                            <div style="font-size: 16px;color: #2456E0;">评价</div>
                        </div>
                        <!-- 查看回报 -->
                        <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer;box-shadow: 0 2px 3px #2456E040;">
                            <div style="font-size: 16px;color: #2456E0;">查看回报</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- session02 -->
        <div style="display: flex; background-color: white;padding: 12px;border-radius: 8px;margin-top: 12px;">
            <!-- left -->
            <div style="flex: 1;padding: 0 12px;">
                <!-- title -->
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">项目信息</div>
                </div>
                <!-- items -->
                <div style="margin-top: 12px;">
                    <el-form :label-position="right" label-width="130px" size="mini" disabled>
                        <el-form-item label="项目名称：">
                            <el-input v-model="currentOrder.projectName"></el-input>
                        </el-form-item>
                        <el-form-item label="定位地址：">
                            <el-input placeholder="#（非必填）" v-model="currentOrder.projectAddress"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- mid -->
            <div style="flex: 1;padding: 0 12px;">
                <!-- title -->
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">业主信息</div>
                </div>
                <!-- items -->
                <div style="margin-top: 12px;">
                    <el-form :label-position="right" label-width="130px" size="mini" disabled>
                        <el-form-item label="业主姓名：">
                            <el-input placeholder="#（非必填）" v-model="currentOrder.owerName"></el-input>
                        </el-form-item>
                        <div style="display: flex;">
                            <el-form-item label="业主手机：" style="flex: 1;">
                                <el-input placeholder="#（非必填）" v-model="currentOrder.owerPhone"></el-input>
                            </el-form-item>
                            <el-checkbox style="margin-top: 5px;margin-left: 12px;">备选项</el-checkbox>
                        </div>
                        <el-form-item label="项目地域：">
                            <el-cascader size="small" :options="regionData" v-model="addressCode" style="width: 100%;"></el-cascader>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- right -->
            <div style="flex: 1;padding: 0 12px;opacity: 0;">
                <!-- title -->
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">智能识别信息</div>
                </div>
                <el-input
                style="margin-top: 12px;"
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="textarea">
                </el-input>
                <!-- 新建订单 -->
                <div style="padding: 5px 20px;background-color: #2456E0;border-radius: 20px;float: right;margin-top: 12px;">
                    <div style="font-size: 16px;color: #ffffff;">立即识别</div>
                </div>
            </div>
        </div>


         <!-- session03 -->
        <div style="background-color: white;padding: 12px;border-radius: 8px;margin-top: 12px;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">接单人信息</div>
            </div>
            <div style="display: flex;">
                <!-- left -->
                <div style="flex: 1;padding: 0 12px;">
                    <!-- items -->
                    <div style="margin-top: 12px;display: flex;">
                        <el-image style="width: 90px;height: 90px;border-radius: 27px;">
                        </el-image>
                        <div style="flex: 1;padding-left: 12px;">
                            <el-descriptions :column="1" size="medium" labelStyle="font-size: 14px;font-weight: bold;">
                                <el-descriptions-item label="下单人">{{`${currentOrder.owerName}`}}</el-descriptions-item>
                                <el-descriptions-item label="联系电话">{{currentOrder.owerPhone}}</el-descriptions-item>
                                <el-descriptions-item label="身份">项目经理</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                </div>
                <!-- right -->
                <div style="flex: 1;padding: 0 12px;" v-if="currentOrder.status != undefined">
                    <!-- items -->
                        <div style="margin-top: 12px;display: flex;">
                            <el-image style="width: 90px;height: 90px;border-radius: 27px;">
                            </el-image>
                            <div style="flex: 1;padding-left: 12px;">
                                <el-descriptions column="1" size="medium" labelStyle="font-size: 14px;font-weight: bold;">
                                    <el-descriptions-item label="下单人">{{currentOrder.orderTakeName}}</el-descriptions-item>
                                    <el-descriptions-item label="联系电话">{{currentOrder.orderTakePhone}}</el-descriptions-item>
                                    <el-descriptions-item label="身份">{{currentOrder.orderTakeRolename}}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                </div>
            </div>
        </div>

            <!-- session04 -->
                <div style="background-color: white;padding: 12px;border-radius: 8px;margin-top: 12px;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">{{currentOrder.serviceName}}</div>
            </div>
            <div style="display: flex;">
                <!-- form -->
                <div style="padding: 0 12px;margin-top: 12px;">
                    <el-form ref="form" label-width="130px" disabled>
                        <div style="display: flex;">
                            <el-form-item label="指定时段">
                                <el-select placeholder="请选择" v-model="currentOrder.timeLimitType">
                                        <el-option
                                        v-for="(obj,idx) in timeTypes"
                                        :key="idx"
                                        :label="obj"
                                        :value="obj">
                                        </el-option>
                                    </el-select>
                            </el-form-item>

                            <el-form-item label="指定时间段">
                                <el-date-picker
                                    type="date"
                                    v-model="currentOrder.timeLimitStart"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                                至
                                <el-date-picker
                                    type="date"
                                    v-model="currentOrder.timeLimitEnd"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </div>



                        <!-- 自定义输入文本 -->
                        <div v-for="(item,idx) in JSON.parse(currentOrder.inputJson)">
                            <!-- text -->
                            <el-form-item :label="item.name" v-if="item.type == 'text'">
                                <el-input :placeholder="`请输入${item['name']}`" size="mini" clearable  
                                :value="item.value"
                                @input="(e)=>customInputHandle(e,idx)"></el-input>
                            </el-form-item>

                            <!-- more -->
                            <el-form-item :label="item.name" v-if="item.type == 'more'">
                                <!-- {{ item }} -->
                                <el-select v-model="currentOrder.more1" multiple placeholder="请选择">
                                    <el-option
                                    v-for="(obj,idx) in item.value.split('，')"
                                    :key="idx"
                                    :label="obj"
                                    :value="idx">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            
                            <!-- one -->
                            <el-form-item :label="item.name" v-if="item.type == 'one'">
                                <!-- {{ item }} -->
                                <el-select v-model="currentOrder.more2" placeholder="请选择">
                                    <el-option
                                    v-for="(obj,idx) in item.value.split('，')"
                                    :key="idx"
                                    :label="obj"
                                    :value="idx">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <!-- 自定义图片 -->
                        <div v-for="(item,idx) in JSON.parse(currentOrder.imgJson)">
                            <!-- img -->
                            <el-form-item :label="item.name" v-if="item.type == 'img'">
                                <el-upload
                                    action="http://47.103.2.155:8801/api/File/upload"
                                    list-type="picture-card"
                                    name="file"
                                    :on-success="(obj,file,list)=>customPictureUploadSuccess(obj,file,list,idx)"
                                    :limit="item.max"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                    </el-upload>
                            </el-form-item>
                        </div>

                    </el-form>
                </div>
            </div>
        </div>


        <!-- session05 -->
        <div style="margin-top: 12px;">
            <div style="display: flex;align-items: stretch;">
                <!-- left -->
                <div style="flex: 1;margin-right: 12px;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="display: flex;">
                        <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                        <div style="font-size: 18px;font-weight: bold;">添加备注与照片{{pictureArray.length}}/6</div>
                    </div>
                    <!-- body -->
                    <div style="margin-top: 12px;">
                        <div style="display: flex;flex-wrap: wrap;">
                            <!-- item -->
                            <div style="position: relative;padding-top: 12px;padding-right: 12px;margin-right: 12px;" v-for="(item,idx) in pictureArray" :key="idx">
                                <el-image style="width: 72px;height: 72px;" :src="item"></el-image>
                                <i class="el-icon-error" style="position:absolute;top: 0;right: 0;color:red;font-size: 24px;" @click="pictureArray.splice(idx,1)"></i>
                            </div>
                        </div>
                        <el-input disabled style="margin-top: 12px;" rows="4" type="textarea" v-model="currentOrder.notes" placeholder="请输入备注">
                        </el-input>
                    </div>
                </div>
                <!-- right -->
                <div style="flex: 1;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="display: flex;align-items: center;">
                        <div style="display: flex;flex: 1;">
                            <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                            <div style="font-size: 18px;font-weight: bold;">附件</div>
                        </div>
                    </div>
                    <div v-for="(obj,idx) in attachment" :key="idx">{{ obj }}</div>
                </div>
            </div>

        </div>

    </div>
  </template>
  
  <script>
    import Api from "./api";
    import { regionData } from 'element-china-area-data'
  export default {
    data() {
      return {
        regionData,
        isAdd:false,
        addressCode:[],
        activeName: 'first',
        name: '我要下单',
        index:0,///当前选中项
        orders:[],
        timeTypes:['指定时段','截止时点','无限制'],
        attachment:[],//附件
        pictureArray:[],//图片
        currentOrder:{
            imgJson:'',
            inputJson:'',
            timeLimitEnd:'',
            timeLimitStart:'',
            timeLimitType:'无限制',
            ///订单状态：待发布，发单中，服务中，已完成，已取消
            status:'待发布',
            owerName:'',
            owerPhone:"",
        }
      }
    },
    mounted(){
        let {id} = this.$route.params;
        this.fetchOrderDetail(id);
    },

    methods:{
        async fetchOrderDetail(id) {
            let self = this;
            let {data} = await Api.netYzOrderGet(id);
            if(data.status == 200) {
                self.currentOrder = data.data;
                self.currentOrder.timeLimitType='无限制';
                let codes = `${self.currentOrder.projectLocal}`.match(/.{1,2}/g);
                let p = codes[0]
                let c = codes[1]
                let a = codes[2]
                self.addressCode = [p,p+c,p+c+a];
                self.orders.push(self.currentOrder);
            } else {
                this.$message({
                    message: '获取失败',
                    type: 'error',
                    showClose: true,
                    duration: 3000,
                });
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.replace({name:"myorder"});

            }
        },
    }



    
  }
  </script>
  


  <style>
  .deleteBorder .el-tabs__nav-wrap::after{
      height: 0;
    }

  </style>